<!--  -->
<template>
  <div class="home-index">
    <!-- 顶部背景色 -->
    <div class="top-bg" :style="bgStyle" v-if="bgFlag"></div>
    <div class="bg" v-else></div>
    <div class="swiper-box">
      <mt-swipe :auto="4000" @change="handleChange">
        <mt-swipe-item v-for="picture in swiperData" :key="picture.id">
          <img :src="picture.pic" />
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <!-- 金刚区 -->
    <div class="home-sort-page">
      <mt-swipe :auto="0">
        <mt-swipe-item v-for="(value, index) in homeNavDatas" :key="index">
          <ul>
            <li v-for="perPage in value" :key="perPage.id">
              <img :src="perPage.pic" alt="" />
              <span>{{ perPage.title }}</span>
            </li>
          </ul>
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <!-- 商城热点 -->
    <div class="home-index-news">
      <div class="news">
        <div class="hot-icon">
          <img :src="imgUrl" alt="" />
        </div>
        <van-swipe
          style="height: 50px"
          vertical
          class="news-list"
          autoplay="2500"
        >
          <van-swipe-item v-for="(value, index) in newsListDatas" :key="index">
            <ul>
              <li>{{ value.title }}</li>
            </ul>
          </van-swipe-item>
        </van-swipe>
        <i class="iconfont icon-jiantou2"></i>
      </div>
    </div>
    <!-- 开学季 -->
    <div class="home-school">
      <img
        src="https://x.dscmall.cn/storage/data/gallery_album/original_img/CPvH5WHHbF0EoG9XjRQbbT3knMVCeEt9DlYGQhJM.png?imageView2/2/format/webp"
        alt=""
      />
    </div>
    <!-- 秒杀 -->
    <skill-page></skill-page>
    <!-- 商品列表 -->
    <shop-list :tabShow='tabShow'></shop-list>
  </div>
</template>

<script>
import { homeNavDatas } from "@/mock/homeQuickNav";
import imgUrl from "@/assets/177_P_1597978466633.png";
import skillPage from "./skill.vue";
import shopList from "./HomeList.vue"
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    skillPage,
    shopList
  },
  data() {
    //这里存放数据
    return {
      tabShow:true,
      swiperData: [
        {
          id: 1,
          pic: "https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978394783.jpg",
        },
        {
          id: 2,
          pic: "https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978396430.jpg",
        },
        {
          id: 3,
          pic: "https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978397105.jpg",
        },
        {
          id: 4,
          pic: "https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978395260.jpg",
        },
        {
          id: 5,
          pic: "https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978395241.jpg",
        },
      ],
      swiperColor: [
        {
          backgroundColor: "#da2d29",
        },
        {
          backgroundColor: "#fd6847",
        },
        {
          backgroundColor: "#3067d8",
        },
        {
          backgroundColor: "#009b8e",
        },
        {
          backgroundColor: "#1162f1",
        },
      ],
      bgStyle: "#da2d29",
      bgFlag: true,
      homeNavDatas: homeNavDatas,
      imgUrl: imgUrl,
      newsListDatas: [
        {
          title: "三大国际腕表品牌签约",
        },
        {
          title: "服务店突破2000多家",
        },
        {
          title: "我们成为中国最大家电零售B2B2C系统",
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleChange(index) {
      this.bgStyle = this.swiperColor[index];
    },
    scrollPage() {
      let top1 = document.documentElement.scrollTop;
      if (top1 > 80) {
        this.bgFlag = false;
      } else {
        this.bgFlag = true;
      }
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    window.addEventListener("scroll", this.scrollPage);
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {
    window.removeEventListener("scroll", this.scrollPage);
  }, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.home-index {
  height: 150rem;
  .top-bg {
    height: 13rem;
    width: 100%;
    background-color: #da2d29;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
  }
  .bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 9rem;
    background-color: #da2d29;
    z-index: 99;
  }
  .swiper-box {
    width: calc(100% - 2rem);
    height: 12rem;
    border-radius: 1rem;
    margin: -4rem 1rem 0;
    /deep/.mint-swipe-indicators {
      left: 15%;
    }
    img {
      width: 100%;
      height: 12rem;
      border-radius: 1rem;
    }
  }
  .home-sort-page {
    width: calc(100% - 2rem);
    height: 21rem;
    background-color: #fff;
    border-radius: 1rem;
    margin: 1rem 1rem 0;
    /deep/.mint-swipe-indicator {
      width: 15px;
      height: 4px;
      display: inline-block;
      background: #fed4d4;
      border-radius: 0.5rem;
      opacity: 0.9;
      margin: 0;
    }
    /deep/.mint-swipe-indicator.is-active {
      background-color: #fc372a;
    }
    ul {
      height: 18rem;
      display: flex;
      justify-content: center;
      align-content: center;
      flex-wrap: wrap;
      li {
        width: 20%;
        height: 9rem;
        text-align: center;
      }
      img {
        width: 7rem;
        height: 7rem;
      }
    }
  }
  .home-index-news {
    width: calc(100% - 2rem);
    height: 4.9rem;
    margin: 0 1rem;
    background-color: #fff;
    border-top: 0.1rem solid #eee;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    .news {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      height: 4.9rem;
      overflow: hidden;
      position: relative;
      img {
        width: 7rem;
        height: 3rem;
      }
      .news-list {
        position: absolute;
        top: 1.5rem;
        left: 8.5rem;
        flex: 1;
        li {
          font-size: 1.4rem;
        }
      }
    }
  }
  .home-school {
    width: calc(100% - 2rem);
    margin: 1rem;
    img {
      width: 100%;
    }
  }
}
</style>